<script setup>
import { ElRow, ElCol, ElCard } from 'element-plus';
import { ref, onMounted, computed } from 'vue';
import { 
    orderTodayCountService, orderTomonthCountService, orderLastmonthCountService 
} from '@/api/order'

// 今日订单总数
const orderTodayCount = ref(0)

// 本月订单总数
const orderTomonthCount = ref(0)

// 上月订单总数
const orderLastmonthCount = ref(0)

// 本月比上月订单数增长百分比
const monthGrowthRate = computed(() => {
    if (!orderLastmonthCount.value) return '0%';
    const growth = ((orderTomonthCount.value - orderLastmonthCount.value) / orderLastmonthCount.value) * 100;
    return `${growth.toFixed(1)}%`;
});

onMounted( async () => {
    // 获取今日订单总数
    const orderTodayCountData = await orderTodayCountService()
    orderTodayCount.value = orderTodayCountData.data
    // 获取本月订单总数
    const orderTomonthCountData = await orderTomonthCountService()
    orderTomonthCount.value = orderTomonthCountData.data
    // 获取上月订单总数
    const orderLastmonthCountData = await orderLastmonthCountService()
    orderLastmonthCount.value = orderLastmonthCountData.data
});


</script>


<template>
    <div>
        <!-- 顶部信息卡片 -->
        <el-row :gutter="20">
            <!-- 学习教程、视频教程、点Star支持项目 -->
            <el-col :span="8">
                <el-card>
                    <template #header>
                        <span>学习教程</span>
                    </template>
                    <a href="#">mall学习教程</a>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <template #header>
                        <span>视频教程</span>
                    </template>
                    <a href="#">mall视频教程（2023）</a>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <template #header>
                        <span>点Star支持项目</span>
                    </template>
                    <a href="#">mall项目</a>
                </el-card>
            </el-col>
        </el-row>

        <!-- 今日订单总数、今日销售总额、昨日销售总额 -->
        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="8">
                <el-card>
                    <div class="card-content">
                        <i class="el-icon-document"></i>
                        <div class="card-text">
                            <p>今日订单总数</p>
                            <p>{{ orderTodayCount.value }}</p>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <div class="card-content">
                        <i class="el-icon-money"></i>
                        <div class="card-text">
                            <p>今日销售总额</p>
                            <p>¥5000.00</p>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <div class="card-content">
                        <i class="el-icon-s-data"></i>
                        <div class="card-text">
                            <p>昨日销售总额</p>
                            <p>¥5000.00</p>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 待处理事务 -->
        <el-card class="box-card" style="margin-top: 20px;">
            <template #header>
                <span>待处理事务</span>
            </template>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content">
                        <p>待付款订单</p>
                        <p>(10)</p>
                    </div>
                </el-col>
                <!-- 其他待处理事务 -->
            </el-row>
        </el-card>

        <!-- 商品总览、用户总览 -->
        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <span>商品总览</span>
                    </template>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content">
                                <p>100</p>
                                <p>已下架</p>
                            </div>
                        </el-col>
                        <!-- 其他商品总览内容 -->
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <span>用户总览</span>
                    </template>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content">
                                <p>100</p>
                                <p>今日新增</p>
                            </div>
                        </el-col>
                        <!-- 其他用户总览内容 -->
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

        <!-- 订单统计 -->
        <el-card class="box-card" style="margin-top: 20px;">
            <template #header>
                <span>订单统计</span>
            </template>
            <div class="order-stats">
                <p>本月订单总数</p>
                <p>{{ orderTomonthCount }}</p>
                <p>{{ monthGrowthRate }} 同比上月</p>
                <!-- 其他订单统计数据 -->
            </div>
        </el-card>
    </div>
</template>
<style scoped>
/* 自定义样式 */
.card-content {
    display: flex;
    align-items: center;
}

.card-text {
    margin-left: 10px;
}

.grid-content {
    text-align: center;
}

.order-stats {
    /* 相关样式 */
}
</style>